<template>
  <div class="dashboard-container">
    <div v-loading="loading" class="app-container" element-loading-text="加载中...">
      <!-- 工具栏 -->
      <page-tools :show-before="true">
        <!-- 前面内容 -->
        <template #before>{{ tipsInfo }}</template>
        <template #after>
          <el-button size="mini" type="danger" @click="$router.push('/salarys/setting')">设置</el-button>
          <el-button size="mini" type="primary" @click="$router.push(`/salarys/monthStatement?yearMonth=${yearMonth}`)">{{ yearMonth }}报表</el-button>
        </template>
      </page-tools>
      <!-- 条件筛选 -->
      <!-- <el-card class="hr-block">
        <el-form label-width="120px">
          <el-form-item label="聘用形式:">
            <el-checkbox-group v-model="formData.approvalsTypeChecks" @change="changeParams">
              <el-checkbox
                v-for="item in approvalsType"
                :key="item.id"
                :label="item.id"
              >{{ item.value }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="部门:">
            <el-checkbox-group v-model="formData.departmentChecks" @change="changeParams">
              <el-checkbox
                v-for="item in departments"
                :key="item.id"
                :label="item.id"
              >{{ item.name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </el-card> -->
      <el-card class="hr-block">
        <el-table :data="salaryList" style="width: 100%">
          <el-table-column type="index" label="序号" />
          <el-table-column prop="username" label="姓名" />
          <el-table-column prop="mobile" label="手机" />
          <el-table-column prop="workNumber" label="工号" />
          <el-table-column width="100" label="聘用形式">
            <template #default="{ row }">
              {{ row.formOfEmployment === 1 ? '正式' : '非正式' }}
            </template>
          </el-table-column>
          <el-table-column prop="departmentName" label="部门" />
          <el-table-column prop="timeOfEntry" width="130" label="入职时间" />
          <el-table-column prop="currentBasicSalary" label="工资基数" />
          <el-table-column label="津贴方案" width="100" prop="subsidyName" />
          <el-table-column label="操作" width="260">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.currentBasicSalary + scope.row.currentPostWage > 0 "
                size="mini"
                type="primary"
                @click="changeSalary('ChangeSalary',scope.row.id)"
              >调薪</el-button>
              <el-button
                v-else
                size="mini"
                type="danger"
                @click="fixedSalary('FixedSalary',scope.row.id)"
              >定薪</el-button>
              <!-- <el-button type="text" size="mini">
                <router-link :to="{'path': '/salary/detail/'+yearMonth+'/'+scope.row.id}">查看</router-link>
              </el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center" style="height: 50px" align="middle">
          <el-pagination
            background
            layout="prev,pager,next"
            :total="params.total"
            :current-page="params.page"
            :page-size="params.pageSize"
            @current-change="changePage"
          />
        </el-row>
      </el-card>
      <!--查看弹框-->
      <el-dialog :title="topLabel" :visible.sync="centerDialogVisible" width="50%" left>
        <component :is="currentComponent" :user-salary="selectedSalaryInfo" :user-id="selectUserId" @onDialogCancel="centerDialogVisible=false" />
        <!-- <ChangeSalary v-if="seeState == 'changeSalary'" :user-salary="selectedSalaryInfo" :user-id="selectUserId" @onDialogCancel="centerDialogVisible=false" /> -->
        <!-- <FixedSalary v-if="seeState == 'fixedSalary'" /> -->
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getSalaryDetail, getSalarysList, getCompanySetting } from '@/api/salary.js'
import { getDepartment } from '@/api/department.js'
import ChangeSalary from './components/change-salary'
import FixedSalary from './components/fixed-salary'
import pageTools from './components/page-tools.vue'
export default {
  name: 'UsersTableIndex',
  components: { ChangeSalary, FixedSalary, pageTools },
  data() {
    return {
      seeState: '',
      centerDialogVisible: false,
      topLabel: '转正',
      approvalsType: [
        { id: 1, value: '正式' },
        { id: 2, value: '非正式' }],
      department: [],
      subsidyScheme: [],
      salaryList: [],
      departments: [],
      loading: false,
      params: {
        total: null,
        page: 1,
        pageSize: 10
      },
      tips: {},
      yearMonth: '', // 202405
      formData: {
        approvalsTypeChecks: [],
        departmentChecks: []
      },
      selectedSalaryInfo: {},
      selectUserId: null,
      currentComponent: ''

    }
  },
  computed: {
    tipsInfo() {
      // return `本月${this.tips.dateRange}：入职 ${this.tips.worksCount} 离职 ${this.tips.leavesCount} 调薪 ${this.tips.adjustCount} 未定薪 ${this.tips.unGradingCount}`
      return `本月${this.yearMonth}：入职 0 离职 0 调薪 0 未定薪 0`
    }
  },
  created() {
    this.GetCompanySetting()
    this.GetSalarysList()
  },
  methods: {
    async GetCompanySetting() {
      this.loading = true
      const res = await getCompanySetting()
      console.log(res)
      this.yearMonth = res.dataMonth
      this.GetDepartment() // 获取组织列表
      // this.GetTips(this.yearMonth)
    },
    // 获取组织列表
    async GetDepartment() {
      this.departments = await getDepartment()
    },
    // 获取薪资列表
    async GetSalarysList() {
      this.loading = true
      const res = await getSalarysList(this.params)
      console.log(res)
      const { rows, total } = res
      this.params.total = total
      this.salaryList = rows
      this.loading = false
    },
    // async GetTips(yearMonth) {
    //   const res = await getTips(yearMonth)
    //   console.log(res)
    //   const { tipsRes } = res
    //   this.tips = tipsRes
    // },
    changePage(newPage) {
      this.params.page = newPage
      this.GetSalarysList()
    },
    async  changeSalary(key, userId) {
      // ChangeSalary === 调薪
      this.topLabel = '调薪'
      this.currentComponent = key
      this.centerDialogVisible = true
      this.selectUserId = userId
      this.selectedSalaryInfo = await getSalaryDetail(userId)
      console.log(this.selectedSalaryInfo)
    },
    fixedSalary(key) {
      this.topLabel = '定薪'
      this.currentComponent = key
      this.centerDialogVisible = true
    },
    // 查询参数发生变化
    changeParams() {
      this.params.page = 1 // 重置第一页
      const approvalsTypeChecks = this.formData.approvalsTypeChecks.join(',')
      const departmentChecks = this.formData.departmentChecks.join(',')
      this.params = { ...this.params, approvalsTypeChecks, departmentChecks }
      this.GetSalarysList()
    }
  }
}
</script>
